import React, { useEffect, useState } from 'react'
import { useNavigate } from "react-router";
import {  Avatar, Card, Button, Modal } from 'antd';
import { UserOutlined, AndroidOutlined } from '@ant-design/icons';

import { getCourseReminder } from '../../api/home';
import './index.scss'
import Calendar from './calendar '

const { Meta } = Card;

const Home = () => {
    const navigate = useNavigate()
    const [timetable, setTimetable] = useState([])       // 课程表信息
    const [curriculum, setCurriculum] = useState([])     // 近期课程信息
    useEffect(() => {
        getCourseReminder({}).then(res => {
            // console.log(res.data);
            res.data.forEach(item => {
                // 存放拼接好时间的字符串
                const timeStr = item.date + ' ' + item.time.split('-')[1] + ':00'
                // 课程结束时间戳
                const beginTime = (new Date(timeStr)).getTime()
                // 当前时间戳
                const presentTime = (new Date()).getTime()
                // 距离课程开始还有多少秒
                let timeDif = beginTime / 1000 - presentTime / 1000
                // 0：未到时间，1：可以进入，2：已过期
                if (timeDif < 0) {
                    item.isWillBegin = 2
                }else{
                    timeDif < 6000 && timeDif > 0 ? item.isWillBegin = 1 : item.isWillBegin = 0
                }

            });
            // console.log(res.data);
            setCurriculum(res.data)
        })
    }, [])

    // 入门培训对话框所需
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    // 日历选择事件
    const onPanelChange = (value, mode) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };

    return (
        <>
            {/* 入门培训对话框 */}
            <Modal
                title="请认真观看！"
                open={isModalOpen}
                footer={null}
                onOk={() => { setIsModalOpen(false) }}
                onCancel={() => { setIsModalOpen(false) }}
            >
                <video src="../../羊村视频.mp4" controls loop autoplay muted poster="poster"></video>
            </Modal>

            {/* 上面部分 */}
            <div className='homeHeader'>
                <div className='left'>
                    <Avatar size={70} icon={<UserOutlined />} />
                    <div>
                        <p>吴彦祖</p>
                        <p>本月共上课100小时，出勤率100%</p>
                        <p>已上课：50课时</p>
                    </div>
                </div>
                <div className='right'>
                    <div onClick={showModal}>
                        <AndroidOutlined />
                        <p>入门培训</p>
                    </div>
                    <div onClick={() => navigate('/mycourse/freetime')}>
                        <AndroidOutlined />
                        <p>空闲时间</p>
                    </div>
                    <div onClick={() => navigate('/person')}>
                        <AndroidOutlined />
                        <p>薪资结算</p>
                    </div>
                </div>
            </div>

            {/* 下面部分 */}
            <div className="homeContent">
                {/* 下面左侧日历 */}
                <div className="contentLeft">
                    <Calendar />
                </div>
                {/* 下面右侧课程 */}
                <div className="contentRight">
                    <span>课程提醒</span>
                    {
                        curriculum && (
                            curriculum.map((item, index) => (
                                <Card
                                    style={{
                                        width: '80%',
                                        marginTop: 16,
                                    }}
                                    loading={false}
                                    key={index}
                                >
                                    <Meta
                                        avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />}
                                        title={item.subject}
                                        description={
                                            <>
                                                <p>日期：{item.date}</p>
                                                <p>时间：{item.time}</p>
                                            </>

                                        }
                                    />
                                    {item.isWillBegin === 2 ? (
                                        <Button disabled>已过期</Button>
                                    ) : (
                                        <Button
                                            disabled={item.isWillBegin === 0}
                                            onClick={() => {
                                                navigate('/classroom',{
                                                    state: {
                                                        courseInfo: item,
                                                        str:'做标识的字符串'
                                                    },
                                                })

                                            }}
                                            type='primary'
                                        >进入教室</Button>
                                    )}
                                </Card>
                            ))
                        )
                    }
                </div>

            </div>
        </>
    )
};
export default Home;
